<template>
  <div class="homePage">
    <canvas
      id="chess"
      :width="450"
      :height="height"
      :style="{ background: primary }"
    >
    </canvas>
  </div>
</template>

<script>
export default {
  name: 'home',
  components: {},
  props: {},
  data() {
    return {
      canvas: null, // 画布
      ctx: null,
      primary: '#E4B97F', // 主题色
      height: 500,
      width: 450,
      locationScale: 50, // 一格的物理尺寸
      padding: 25, // 左右边距
      chessFontSize: 28, // 棋子中字的大小
      chessWidth: 15, // 棋子半径

      // 棋子势力
      chessList: [
        // 黑方
        {
          y: 0,
          x: 0,
          text: '車',
          show: true, // 表示棋子是否显示
          type: 'car',
          camp: 'black',
          active: false,
        },
        {
          y: 0,
          x: 1,
          text: '馬',
          show: true,
          type: 'horse',
          camp: 'black',
          active: false,
        },
        {
          y: 0,
          x: 2,
          text: '象',
          show: true,
          type: 'like',
          camp: 'black',
          active: false,
        },
        {
          y: 0,
          x: 3,
          text: '士',
          show: true,
          type: 'shi',
          camp: 'black',
          active: false,
        },
        {
          y: 0,
          x: 4,
          text: '帅',
          show: true,
          type: 'will',
          camp: 'black',
          active: false,
        },
        {
          y: 0,
          x: 5,
          text: '士',
          show: true,
          type: 'shi',
          camp: 'black',
          active: false,
        },
        {
          y: 0,
          x: 6,
          text: '象',
          show: true,
          type: 'like',
          camp: 'black',
          active: false,
        },
        {
          y: 0,
          x: 7,
          text: '馬',
          show: true,
          type: 'horse',
          camp: 'black',
          active: false,
        },
        {
          y: 0,
          x: 8,
          text: '車',
          show: true,
          type: 'car',
          camp: 'black',
          active: false,
        },
        {
          y: 2,
          x: 1,
          text: '炮',
          show: true,
          type: 'gun',
          camp: 'black',
          active: false,
        },
        {
          y: 2,
          x: 7,
          text: '炮',
          show: true,
          type: 'gun',
          camp: 'black',
          active: false,
        },
        {
          y: 3,
          x: 0,
          text: '卒',
          show: true,
          type: 'pawn',
          camp: 'black',
          active: false,
        },
        {
          y: 3,
          x: 2,
          text: '卒',
          show: true,
          type: 'pawn',
          camp: 'black',
          active: false,
        },
        {
          y: 3,
          x: 4,
          text: '卒',
          show: true,
          type: 'pawn',
          camp: 'black',
          active: false,
        },
        {
          y: 3,
          x: 6,
          text: '卒',
          show: true,
          type: 'pawn',
          camp: 'black',
          active: false,
        },
        {
          y: 3,
          x: 8,
          text: '卒',
          show: true,
          type: 'pawn',
          camp: 'black',
          active: false,
        },

        // 红方
        {
          y: 9,
          x: 0,
          text: '車',
          show: true,
          type: 'car',
          camp: 'red',
          active: false,
        },
        {
          y: 9,
          x: 1,
          text: '馬',
          show: true,
          type: 'horse',
          camp: 'red',
          active: false,
        },
        {
          y: 9,
          x: 2,
          text: '象',
          show: true,
          type: 'like',
          camp: 'red',
          active: false,
        },
        {
          y: 9,
          x: 3,
          text: '士',
          show: true,
          type: 'shi',
          camp: 'red',
          active: false,
        },
        {
          y: 9,
          x: 4,
          text: '将',
          show: true,
          type: 'will',
          camp: 'red',
          active: false,
        },
        {
          y: 9,
          x: 5,
          text: '士',
          show: true,
          type: 'shi',
          camp: 'red',
          active: false,
        },
        {
          y: 9,
          x: 6,
          text: '象',
          show: true,
          type: 'like',
          camp: 'red',
          active: false,
        },
        {
          y: 9,
          x: 7,
          text: '馬',
          show: true,
          type: 'horse',
          camp: 'red',
          active: false,
        },
        {
          y: 9,
          x: 8,
          text: '車',
          show: true,
          type: 'car',
          camp: 'red',
          active: false,
        },
        {
          y: 7,
          x: 1,
          text: '炮',
          show: true,
          type: 'gun',
          camp: 'red',
          active: false,
        },
        {
          y: 7,
          x: 7,
          text: '炮',
          show: true,
          type: 'gun',
          camp: 'red',
          active: false,
        },
        {
          y: 6,
          x: 0,
          text: '兵',
          show: true,
          type: 'pawn',
          camp: 'red',
          active: false,
        },
        {
          y: 6,
          x: 2,
          text: '兵',
          show: true,
          type: 'pawn',
          camp: 'red',
          active: false,
        },
        {
          y: 6,
          x: 4,
          text: '兵',
          show: true,
          type: 'pawn',
          camp: 'red',
          active: false,
        },
        {
          y: 6,
          x: 6,
          text: '兵',
          show: true,
          type: 'pawn',
          camp: 'red',
          active: false,
        },
        {
          y: 6,
          x: 8,
          text: '兵',
          show: true,
          type: 'pawn',
          camp: 'red',
          active: false,
        },
      ],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initData()
  },
  methods: {
    // 初始化数据
    initData() {
      const canvas = (this.canvas = document.getElementById('chess'))
      const ctx = (this.ctx = canvas.getContext('2d'))
      this.drawChessContainer()
      this.drawChess()
    },

    // 绘制棋盘
    drawChessContainer() {
      const { ctx } = this
      // 每次绘制棋盘前,先清空画布
      ctx.rect(0, 0, this.width, this.height)
      // 设置颜色
      ctx.fillStyle = this.primary
      ctx.strokeStyle = '#000'

      // 循环画出来会少一条横线,我们手动加上
      ctx.beginPath()
      ctx.moveTo(this.padding, 475)
      ctx.lineTo(425, 475)
      // 绘制线条
      ctx.stroke()
      for (var index = 1; index <= 9; index++) {
        // 横线
        ctx.beginPath()
        ctx.moveTo(this.padding, index * this.locationScale - this.padding)
        ctx.lineTo(425, index * this.locationScale - this.padding)
        // 绘制线条
        ctx.stroke()

        // 竖线
        ctx.beginPath()
        ctx.moveTo(this.locationScale * index - this.padding, this.padding)
        ctx.lineTo(this.locationScale * index - this.padding, 475)
        // 绘制线条
        ctx.stroke()

        // 楚河,汉界
        ctx.fillStyle = this.primary
        ctx.lineWidth = 2
        ctx.beginPath()
        ctx.rect(26, 225, 398, this.locationScale)
        ctx.fill()
        ctx.font = '28px "报隶-简"'
        ctx.fillStyle = '#000'
        ctx.textBaseline = 'middle'
        // ctx.fillText('楚河', 75, 250)
        // ctx.fillText('汉界', 325, 250)
      }
    },

    // 绘制单个棋子
    drawChessSingle(chess, { chessWidth } = {}) {
      if (!chess.show) return
      const { ctx, chessFontSize, locationScale, padding } = this
      chessWidth = chessWidth || this.chessWidth
      let x = chess.x * locationScale + padding
      let y = chess.y * locationScale + padding
      // 画棋
      ctx.beginPath()
      ctx.lineWidth = '5'
      ctx.strokeStyle = '#898341'
      ctx.arc(x, y, chessWidth, 0, 2 * Math.PI)
      ctx.stroke()
      ctx.closePath()
      ctx.fillStyle = chess.camp
      ctx.fill()
      ctx.lineWidth = '1'

      // 画字
      ctx.font = chessFontSize + 'px "报隶-简"'
      ctx.fillStyle = '#fff'
      ctx.textBaseline = 'middle'
      ctx.fillText(chess.text, x - chessFontSize / 2, y)
    },

    // 绘制棋子
    drawChess() {
      this.chessList.forEach((item) => {
        this.drawChessSingle(item)
      })
    },

    // 棋子点击事件
    blockClick() {},
  },
}
</script>

<style scoped lang="scss">
.homePage {
  width: 100%;
  height: 100%;
  .action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  #chess {
    transform: translate(350px, 50px);
  }
}
</style>
